<template>
  <div class="cart-my">
    <div class="sort-item-content">
      <checkbox-group class="uni-list" @change="checkboxChange">
        <div
          class="content-item"
          v-for="(item, index) in showData"
          :key="index"
        >
          <div class="radio">
            <checkbox
              :checked="arrChose.includes(item.s_id)"
              :value="item.s_id"
              :key="index"
              class="checkRadio"
            ></checkbox>
          </div>
          <div class="img-wrapper">
            <img class="img" :src="item.img" />
          </div>
          <div class="content-wrapper">
            <div class="title">{{ item.title }}</div>
            <div class="cart-bottom">
              <div class="cart-money">
                <div class="money">
                  <text class="iconfont icon-jiage"></text>{{ item.price }}
                </div>
              </div>
              <div class="cart">
                <div>
                  <div class="btn1" plain="true" @click="reduce(item, index)">
                    -
                  </div>
                </div>
                <div class="num">
                  <div>{{ item.num }}</div>
                </div>
                <div>
                  <div class="btn2" plain="true" @click="add(item, index)">
                    +
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </checkbox-group>
    </div>
    <div class="home-foot">
      <div class="foot-ding" @click="myOrderTo">
        <div>
          <div><text class="iconfont icon-dingdan icon"></text></div>
          <div>订单</div>
        </div>
      </div>

      <div class="foot-pay" @click="toPay">
        <div><text class="iconfont icon-jiage"></text>{{ allPrice }}</div>
        <div>去支付</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true,
      checked: false, //全选
      te: 0.5,
      arrChose: [], //选中的按钮
      choseData: [], //选中的数据结算
      showData: [],
      openid: "",
      allPrice: 0,
    };
  },
  onShow() {
    let that = this;
    uni.getStorage({
      key: "openid",
      success: function (res) {
        // console.log(res);
        that.openid = res.data;
        that.requestData();
      },
    });
  },
  methods: {
    requestData() {
      return new Promise((resolve, reject) => {
        this.$MyRequest({
          url: "/cart_my",
          method: "POST",
          data: {
            openid: this.openid,
          },
        }).then((res) => {
          console.log(res.data);
          this.showData = res.data.data;
          this.showData = this.showData.sort((a, b) => {
            return a.add_time < b.add_time ? 1 : -1;
          });
          resolve();
        });
      });
    },
    add(item, index) {
      // console.log(item);
      // this.showData[index].num += 1;
      // console.log(this.choseData);
      if (this.showData[index].num < 99) {
        this.$MyRequest({
          url: "/set_cart_one_add",
          method: "POST",
          data: {
            sId: item.s_id,
            openid: this.openid,
          },
        }).then((res) => {
          // console.log(res.data);
          this.requestData().then(() => {
            this.getPrice();
          });
        });
      } else {
        uni.showToast({
          title: "到达上限",
          icon: "none",
          duration: 1500,
        });
      }

      // console.log(this.showData[index]);

      // this.te === 1;
    },
    // 减,删除
    reduce(item, index) {
      // console.log(item);
      if (this.showData[index].num <= 1) {
        let that = this;
        uni.showModal({
          title: "确认删除该商品吗？",
          cancelText: "再想想",
          cancelColor: "#999",
          confirmColor: "#E92828",
          success(res) {
            if (res.confirm) {
              that
                .$MyRequest({
                  url: "/set_cart_one_delete",
                  method: "POST",
                  data: {
                    sId: item.s_id,
                    openid: that.openid,
                  },
                })
                .then((res) => {
                  // console.log(res.data);
                  that.requestData().then((res) => {
                    // console.log(that.arrChose.length);
                    // if (that.arrChose.length < 2) {
                    //   that.checked = false;
                    // }

                    that.getPrice();
                  });
                });
            } else if (res.cancel) {
              console.log("用户点击取消");
            }
          },
        });
      } else {
        this.$MyRequest({
          url: "/set_cart_one_reduce",
          method: "POST",
          data: {
            sId: item.s_id,
            openid: this.openid,
          },
        }).then((res) => {
          console.log(res.data);
          this.requestData().then(() => {
            this.getPrice();
          });
        });
      }

      // console.log(this.choseData);
    },
    checkAll() {
      if (!this.checked) {
        this.checked = true;
        this.choseData = this.showData;
      } else {
        this.checked = false;
        this.choseData = [];
      }
    },
    //去支付
    toPay() {
      if (this.allPrice > 0) {
        let that = this;
        uni.navigateTo({
          url:
            "/pages/home/service/GroupBuying/ConfirmOrder?choseData=" +
            encodeURIComponent(JSON.stringify(that.choseData)),
        });

        // uni.showModal({
        //   title: "请确认是否支付？",
        //   content: that.allPrice + "元",
        //   cancelText: "取消",
        //   confirmText: "确定支付",
        //   cancelColor: "#999",
        //   confirmColor: "#E92828",
        //   success(res) {
        //     if (res.confirm) {
        //       uni.navigateTo({
        //         url: "/pages/home/service/GroupBuying/PaySucess",
        //       });
        //     } else if (res.cancel) {
        //       console.log("用户点击取消");
        //     }
        //   },
        // });
      } else {
        uni.showToast({
          title: "请选择商品结算",
          icon: "none",
          duration: 1500,
        });
      }
    },
    //选择框触发
    checkboxChange(e) {
      console.log(e.target.value);
      this.arrChose = e.target.value;
      this.getPrice();
    },
    getPrice() {
      this.choseData = this.showData.filter((s) => {
        for (let i = 0; i < this.arrChose.length; i++) {
          // return s.id == arrChose[i];
          if (s.s_id == this.arrChose[i]) {
            return s;
          }
        }
      });
      this.allPrice = 0;
      for (let i in this.choseData) {
        this.allPrice += this.choseData[i].num * this.choseData[i].price;
      }
    },
    myOrderTo() {
      uni.navigateTo({ url: "/pages/home/service/GroupBuying/MyOrder" });
    },
  },
};
</script>

<style lang="scss">
@import "@/static/styles/mixin.scss";
.cart-my {
  width: 100%;
  height: 100vh;
  background-color: #f0f0f0;
}
.sort-item-content {
  padding: 0 15rpx;
  padding-top: 15rpx;
  // margin-top: 180rpx;
  margin-bottom: 90rpx;
  // height: 100%;
  width: 100%;
  // padding-right: 50rpx;
  // background-color: $uni-color-indexBg;
  box-sizing: border-box;
  // margin-bottom: 30rpx;
  .content-item {
    display: flex;
    margin-bottom: 30rpx;
    // border-bottom: 1rpx solid rgb(179, 177, 177);
    // padding-bottom: 10px;
    .radio {
      flex: 0 0 10%;
      @include center;
      checkbox .wx-checkbox-input {
        border-radius: 50% !important;
        color: #ffffff !important;
        width: 40rpx;
        height: 40rpx;
      }

      checkbox .wx-checkbox-input.wx-checkbox-input-checked {
        color: #fff;
        background: $uni-color-cart;
        width: 40rpx;
        height: 40rpx;
      }

      .wx-checkbox-input.wx-checkbox-input-checked {
        // border: none !important;
      }
    }
    .img-wrapper {
      // padding: 20rpx 20rpx 20rpx 0;
      box-sizing: border-box;
      flex: 0 0 30%;
      // width: 250rpx;
      // height: 270rpx;
      .img {
        width: 100%;
        height: 210rpx;
      }
    }
    .content-wrapper {
      width: 100%;
      height: 220rpx;
      padding: 5rpx 0;
      padding-left: 18rpx;
      box-sizing: border-box;
      position: relative;
      border-bottom: 1rpx solid rgba(223, 222, 222, 0.746);
      padding-bottom: 10px;
      // padding-right: 15rpx;
      // right: 15rpx;
      .title {
        font-size: 24rpx;
        color: black;
      }
      .author {
        margin-top: 20rpx;
      }
      .cart-bottom {
        position: absolute;
        bottom: 5px;
        display: flex;
        .cart-money {
          .money {
            color: $uni-color-cart;
            font-size: 35rpx;
            font-weight: bold;
            // @include center;
          }
        }
        .cart {
          // padding-left: 120rpx;
          // box-sizing: border-box;
          position: absolute;
          left: 240rpx;
          bottom: 0;
          box-sizing: border-box;
          display: flex;
          .num {
            // padding: 0 20rpx;
            width: 68rpx;
            @include center;
          }
          .btn1 {
            border-radius: 5rpx;
            font-size: 40rpx;
            font-weight: bold;
            color: $uni-color-cart;
            width: 45rpx;
            // letter-spacing: 1px;
            // size: 10;
            height: 45rpx;
            @include center;
            border: 1px solid $uni-color-cart;
            // background-color: $uni-color-cart;
            // border: none;
          }
          .btn2 {
            border-radius: 5rpx;
            position: absolute;
            left: 115rpx;
            bottom: 0;
            font-size: 40rpx;
            font-weight: bold;
            color: #eee;
            width: 45rpx;
            // letter-spacing: 1px;
            // size: 10;
            height: 45rpx;
            @include center;
            background-color: $uni-color-cart;
            border: 1px solid $uni-color-cart;
          }
        }
      }
    }
  }
}
.home-foot {
  width: 100%;
  // height: 70px;
  position: fixed;
  z-index: 500;
  bottom: 0;
  display: flex;
  // align-items: center;
  height: 90rpx;
  background-color: #fff;
  border-top: 1px solid rgb(233, 231, 231);
  .foot-ding {
    @include center;
    text-align: center;
    // vertical-align: middle;
    flex: 0 0 120rpx;
    background-color: #fff;
    font-size: 27rpx;
  }
  .foot-cart {
    @include center;
    font-size: 27rpx;
    text-align: center;
    flex: 0 0 120rpx;
    background-color: #fff;
  }

  .foot-pay {
    text-align: center;
    flex: 1;
    background-color: $uni-color-cart;
    color: #fff;
  }
  .icon {
    font-size: 37rpx;
  }
}
</style>
